<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script>
        function f1() {
            let t = setInterval(function () {
                let image = document.getElementById("image");
                if (parseInt(image.style.left) < 1750) {
                    image.style.left = parseInt(image.style.left) + 50 + "px";
                }
            }, 100);
        }

        function f2() {
            setInterval(function () {
                let d2 = document.getElementById("d2");
                if (parseInt(d2.style.width) < 100) {
                    d2.style.width = parseInt(d2.style.width) + 2 + "%";
                }
            }, 100);
        }

        function fn(s) {
            s = "0" + s;
            return s.substring(s.length - 2);
        }

        window.onload = function () {
            setInterval(function () {
                let date = new Date();
                document.getElementById("s1").innerHTML = date.getFullYear() + "年" + fn(date.getMonth() + 1) + "月" + fn(date.getDate()) + "日 " + fn(date.getHours()) + ":" + fn(date.getMinutes()) + ":" + fn(date.getSeconds())
            }, 100);
        }
    </script>
</head>
<body>
<img id="image" src="../images/heihei.gif" style="position: relative;left: 0px" onclick="f1()">
<div id="d1" style="width: 1000px;height: 50px;border: 1px solid">
    <div id="d2" style="width: 2%;height: 100%;background-color: red;" onclick="f2()"></div>
</div>
<!--
    在浏览器中展示当前时间,时间格式:yyyy年MM月dd日 HH:mm:ss
    要求显示的时间随着真实时间的变化而随之变化
-->
<span id="s1"></span>
</body>
</html>